<template>
	<view class="top_box">
		<view class="jindutiao_box">
			<view class="i">
				<view>
					<view class="line" style="background-color: #ffffff;" />
					<view class="icon_box">
						<image src="/static/icon/gou.png" />
					</view>
					<view class="line" />
				</view>
				<view>下单成功</view>
			</view>
			<view class="i">
				<view>
					<view class="line" />
				</view>
				<view />
			</view>
			<view class="i">
				<view>
					<view class="line" />
					<view class="icon_box">
						<view v-if="info.status==1" style="background-color: #FFDF20;" />
						<image v-else :src="`/static/icon/${info.status==2?'gou':'cha'}.png`" />
					</view>
					<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
				</view>
				<view>验证卡券</view>
			</view>
			<view class="i">
				<view>
					<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
				</view>
				<view />
			</view>
			<view class="i">
				<view>
					<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
					<view class="icon_box">
						<image v-if="info.status==2" src="/static/icon/gou.png" />
						<view v-else style="background-color: #CAD5E2;" />
					</view>
					<view class="line" style="background-color: #ffffff;" />
				</view>
				<view>快速到账</view>
			</view>
		</view>
		<view class="liucheng_box">
			<template v-if="info.status>1">
				<view class="i" @click="this.$refs.popup.open()">
					<view class="l">
						<image :src="`/static/icon/${info.status==2?'yanzhengchenggong':'yanzhengshibai'}.png`" />
						<view class="line2" />
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							验证{{info.status==2?'成功':'失败'}}
							<image src="/static/icon/to_right.png" style="width: 32rpx;height: 32rpx;" />
						</view>
						<view style="line-height: 40rpx;color: #62748E;font-size: 28rpx;">
							{{info.status==2?'您的订单已成交，请在"我的-钱包"查收回收款。感谢您的使用，期待再次为您服务':'您的卡券未通过验证，本次交易已终止。请核对卡券信息后重新提交'}}
						</view>
						<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;"
							v-if="info.solveTime">{{info.solveTime}}
						</view>
					</view>
				</view>
				<view class="i">
					<view class="l">
						<view class="dian_box">
							<view class="line2"></view>
							<view class="dian" />
							<view class="line2" style="background-color: #ffffff;"></view>
						</view>
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							验证中</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="i" @click="this.$refs.popup.open()">
					<view class="l">
						<image src="/static/icon/yanzhengzhong.png" v-if="info.status==1" />
						<view class="dian_box" v-else>
							<view class="line2"></view>
							<view class="dian" />
							<view class="line2"></view>
						</view>
						<view class="line2" />
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							验证中
							<image src="/static/icon/to_right.png" style="width: 32rpx;height: 32rpx;" />
						</view>
						<view style="line-height: 40rpx;color: #62748E;font-size: 28rpx;">
							您的卡券正在检测中，请耐心等待</view>
						<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;">
							{{info.createTime}}
						</view>
					</view>
				</view>
				<view class="i">
					<view class="l">
						<view class="dian_box">
							<view class="line2"></view>
							<view class="dian" />
							<view class="line2" style="background-color: #ffffff;"></view>
						</view>
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							下单成功</view>
					</view>
				</view>
			</template>
		</view>
	</view>
	<!-- #ifdef MP-WEIXIN -->
	<view class="box4">
		<view style="height: 90rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;">
			<image src="/static/icon/avatar1.png" style="width: 90rpx;height: 90rpx;margin-right: 20rpx;"></image>
			<view
				style="flex: 1;height: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;">
				<view style="height: 40rpx;line-height: 40rpx;color: #020618;font-size: 30rpx;">小优 专属顾问</view>
				<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;">专业在线1V1帮您解决疑问</view>
			</view>
		</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/card_2.png" mode="widthFix"
			style="width: 100%;margin-top: 30rpx;"></image>
		<view @click="customerService"
			style="height: 80rpx;width: 100%;border-radius: 20rpx;background-color: #F8FAFC;color: #020618;font-size: 28rpx;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;">
			<image src="/static/icon/wx.png" style="margin-right: 10rpx;width: 40rpx;" mode="widthFix"></image>添加微信
		</view>
	</view>
	<!-- #endif -->
	<view class="box4">
		<image src="/static/order/t1.png" mode="heightFix" style="height: 36rpx;" />
		<view
			style="margin: 36rpx 0;height: 80rpx;width: 100%;display: flex;align-items: center;justify-content: flex-start;font-size: 28rpx;">
			<image :src="info.productUrl" style="height: 80rpx;width: 80rpx;margin-right: 20rpx;" />
			<text>{{info.orderName}}</text>
		</view>
		<view class="card_info">
			<view v-if="info.cardNo">
				<text>卡号</text>
				<view>{{info.cardNo}}</view>
			</view>
			<view>
				<text>卡密</text>
				<view>{{kan?info.cardPwd:info.psw}}</view>
				<image :src="`/static/icon/${kan?'bu':''}kan.png`" @click="kan=!kan"></image>
			</view>
		</view>
		<view class="order_info" style="height: 90rpx;">
			<text>回收价格</text>
			<text style="font-size: 36rpx;">¥{{info.recyclePrice}}</text>
		</view>
		<navigator v-if="info.faceValueId && info.status==3"
			:url="`/pages/sell/sell?faceValueId=${info.faceValueId}&cardPwd=${info.cardPwd}&cardNo=${info.cardNo || ''}`"
			style="background-color: #FFDF20;height: 90rpx;width: 100%;display: flex;align-items: center;justify-content: center;font-size: 34rpx;border-radius: 30rpx;margin-top: 50rpx;">
			重新提交</navigator>
		<navigator v-if="info.faceValueId && info.status==2" :url="`/pages/sell/sell?faceValueId=${info.faceValueId}`"
			style="background-color: #FFDF20;height: 90rpx;width: 100%;display: flex;align-items: center;justify-content: center;font-size: 34rpx;border-radius: 30rpx;margin-top: 50rpx;">
			再来一单</navigator>
	</view>
	<view class="box4" style="border-radius: 30rpx 30rpx 0 0;">
		<image src="/static/order/t2.png" mode="heightFix" style="height: 36rpx;" />
		<view class="order_info" style="margin: 36rpx 0;">
			<text>订单编号</text>
			<text>{{info.orderCode}}</text>
		</view>
		<view class="order_info">
			<text>创建时间</text>
			<text>{{info.createTime}}</text>
		</view>
	</view>

	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: space-between;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/order/t3.png" mode="heightFix" style="height: 40rpx;"></image>
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<view class="top_box">
			<view class="jindutiao_box">
				<view class="i">
					<view>
						<view class="line" style="background-color: #ffffff;" />
						<view class="icon_box">
							<image src="/static/icon/gou.png" />
						</view>
						<view class="line" />
					</view>
					<view>下单成功</view>
				</view>
				<view class="i">
					<view>
						<view class="line" />
					</view>
					<view />
				</view>
				<view class="i">
					<view>
						<view class="line" />
						<view class="icon_box">
							<view v-if="info.status==1" style="background-color: #FFDF20;" />
							<image v-else :src="`/static/icon/${info.status==2?'gou':'cha'}.png`" />
						</view>
						<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
					</view>
					<view>验证卡券</view>
				</view>
				<view class="i">
					<view>
						<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
					</view>
					<view />
				</view>
				<view class="i">
					<view>
						<view class="line" :style="{'background-color':info.status==2?'#FFDF20':'#E2E8F0'}" />
						<view class="icon_box">
							<image v-if="info.status==2" src="/static/icon/gou.png" />
							<view v-else style="background-color: #CAD5E2;" />
						</view>
						<view class="line" style="background-color: #ffffff;" />
					</view>
					<view>快速到账</view>
				</view>
			</view>
			<view class="liucheng_box">
				<view class="i" v-if="info.status>1">
					<view class="l">
						<image :src="`/static/icon/${info.status==2?'yanzhengchenggong':'yanzhengshibai'}.png`" />
						<view class="line2" />
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							验证{{info.status==2?'成功':'失败'}}
						</view>
						<view style="line-height: 40rpx;color: #62748E;font-size: 28rpx;">
							{{info.status==2?'您的订单已成交，请在"我的-钱包"查收回收款。感谢您的使用，期待再次为您服务':'您的卡券未通过验证，本次交易已终止。请核对卡券信息后重新提交'}}
						</view>
						<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;"
							v-if="info.solveTime">
							{{info.solveTime}}
						</view>
					</view>
				</view>
				<view class="i">
					<view class="l">
						<image src="/static/icon/yanzhengzhong.png" v-if="info.status==1" />
						<view class="dian_box" v-else>
							<view class="line2"></view>
							<view class="dian" />
							<view class="line2"></view>
						</view>
						<view class="line2" />
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							验证中</view>
						<view style="line-height: 40rpx;color: #62748E;font-size: 28rpx;">
							您的卡券正在检测中，请耐心等待</view>
						<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;">
							{{info.createTime}}
						</view>
					</view>
				</view>
				<view class="i">
					<view class="l">
						<view class="dian_box">
							<view class="line2"></view>
							<view class="dian" />
							<view class="line2" style="background-color: #ffffff;"></view>
						</view>
					</view>
					<view class="r">
						<view
							style="height: 50rpx;font-size: 34rpx;display: flex;align-items: center;justify-content: space-between;width: 100%;">
							提交成功</view>
						<view style="line-height: 40rpx;color: #62748E;font-size: 28rpx;">
							订单提交成功</view>
						<view style="height: 35rpx;line-height: 35rpx;color: #62748E;font-size: 24rpx;">
							{{info.createTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
	<view class="mask" v-if="showMingpian" @click="showMingpian=false">
	</view>
	<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="showMingpian=false">
			</image>
		</view>
		<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
		<view
			style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
			长按识别二维码，添加专属顾问</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png" show-menu-by-longpress
			mode="heightFix" style="height: 300rpx;" lazy-load />
	</view>

	<!-- #ifdef MP-ALIPAY -->
	<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
	<!-- #endif -->
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				kan: false,
				showMingpian: false,
				info: {},
			}
		},
		async onLoad(options) {
			let id = options.id;
			let {
				result
			} = await api.order_info(id);
			result.psw = this.desensitizeIdCard(result.cardPwd)
			this.info = result;
			console.log(result)
		},
		methods: {
			customerService() {
				getApp().customerService(this);
			},
			desensitizeIdCard(idCard) {
				if (!idCard || typeof idCard !== 'string') return '';

				const length = idCard.length;

				if (length <= 4) {
					return idCard;
				} else {
					// 保留前3位和后3位，中间全部变成*
					const firstThree = idCard.substring(0, 2);
					const lastThree = idCard.substring(length - 2);
					const middleStars = '*'.repeat(length - 4);
					return firstThree + middleStars + lastThree;
				}
			},
		}
	}
</script>

<style>
	.top_box {
		width: 100%;
		background-color: #ffffff;
		border-radius: 0 0 30rpx 30rpx;
		padding: 36rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.jindutiao_box {
		height: 90rpx;
		width: 610rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 36rpx;
	}

	.jindutiao_box .i {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	.jindutiao_box .i>view:first-child {
		height: 36rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.jindutiao_box .i>view:last-child {
		height: 26rpx;
		line-height: 26rpx;
		font-size: 24rpx;
	}

	.jindutiao_box .i:nth-child(even) {
		flex: 1;
	}

	.jindutiao_box .i .line {
		flex: 1;
		height: 2px;
		background-color: #FFDF20;
	}

	.jindutiao_box .i .icon_box {
		height: 36rpx;
		width: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.jindutiao_box .i .icon_box view {
		height: 12rpx;
		width: 12rpx;
		border-radius: 50%;
	}

	.jindutiao_box .i .icon_box image {
		height: 100%;
		width: 100%;
	}

	.liucheng_box {
		width: 100%;
	}

	.liucheng_box .i {
		width: 100%;
		height: auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20rpx;
	}

	.liucheng_box .i .l {
		width: 50rpx;
		display: flex;
		align-self: stretch;
		align-items: center;
		flex-direction: column;
	}

	.liucheng_box .i .l image {
		height: 50rpx;
		width: 50rpx;
		margin: 10rpx 0;
	}

	.liucheng_box .i .l .line2 {
		flex: 1;
		width: 2rpx;
		background-color: #E2E8F0;
	}

	.liucheng_box .i .l .dian_box {
		height: 50rpx;
		width: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 10rpx;
	}

	.liucheng_box .i .l .dian_box .dian {
		background-color: #CAD5E2;
		height: 12rpx;
		width: 12rpx;
		border-radius: 50%;
	}

	.liucheng_box .i .r {
		flex: 1;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10rpx;
		padding-bottom: 40rpx;
	}

	.box4 {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 36rpx;
		box-sizing: border-box;
	}

	.box4 .order_info {
		height: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.box4 .order_info text:first-child {
		color: #62748E;
	}

	.card_info {
		min-height: 90rpx;
		background-color: #F8FAFC;
		border-radius: 20rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
	}

	.card_info>view {
		height: 90rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #E2E8F0;
		font-size: 28rpx;
		gap: 36rpx;
	}

	.card_info>view:first-child {
		border: none;
	}

	.card_info>view image {
		height: 50rpx;
		width: 50rpx;
	}

	.card_info>view text:first-child {
		color: #62748E;
	}

	.card_info>view view {
		flex: 1;
		text-align: right;
	}
</style>